<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/WEB-INF/layout/layout.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

	<ui:define name="body">
		<rich:panel id="mainScreenWrapper">
			<h:form>
				<rich:panel id="mainScreenExpense" styleClass="borderElement" header="#{msg['newExpense']}">
					
					<rich:panel id="formExpenseValue" styleClass="formPanel">
						<h:outputLabel styleClass="formLabel" value="#{msg['expenseValue']}" for="inputExpenseValue" />
						<h:inputText id="inputExpenseValue" styleClass="formInput" value="#{mainScreen.expense.value}" />
					</rich:panel>
					
					<rich:panel id="formCycleType" styleClass="formPanel">
						<h:outputLabel styleClass="formLabel" value="#{msg['cycleType']}" for="radioCycleType" />
						<h:selectOneRadio id="radioCycleType" styleClass="formInput" value="#{mainScreen.expense.cycle.cycleType.id}"
								valueChangeListener="#{mainScreen.valueChangeRadioCycleType}">
							<f:selectItems value="#{mainScreen.cycleTypes}" var="item" itemValue="#{item.id}" itemLabel="#{msg[item.name]}" />
							<a4j:ajax event="valueChange" render="mainScreenExpense"/>
						</h:selectOneRadio>
					</rich:panel>
					
					<rich:panel id="formIntervalType" styleClass="formPanel" rendered="#{mainScreen.renderedIntervalType}">
						<h:outputLabel styleClass="formLabel" value="#{msg['intervalType']}" for="radioIntervalType" />
						<h:selectOneRadio id="radioIntervalType" styleClass="formInput" value="#{mainScreen.expense.cycle.intervalType.id}">
							<f:selectItems value="#{mainScreen.intervalTypes}" var="item" itemValue="#{item.id}" itemLabel="#{msg[item.name]}" />
						</h:selectOneRadio>
					</rich:panel>
					
					<rich:panel id="formIntervalValue" styleClass="formPanel">
						<h:outputLabel styleClass="formLabel" value="#{msg['intervalValue']}" for="inputIntervalValue" />
						<h:inputText id="inputIntervalValue" styleClass="formInput" value="#{mainScreen.expense.cycle.intervalValue}" />
					</rich:panel>
					
					<rich:panel id="formTags" styleClass="formPanel">
						<h:outputLabel styleClass="formLabel" value="#{msg['tags']}" for="inputTags" />
						<h:inputText id="inputTags" styleClass="formInput" value="#{mainScreen.tags}" />
					</rich:panel>
					
					<rich:panel id="formButtons">
						<a4j:commandButton value="#{msg['save']}" action="#{mainScreen.save}" execute="@form"/>
					</rich:panel>
				</rich:panel>
			</h:form>
		</rich:panel>
	</ui:define>
</ui:composition>